{template 'common/header-storex'}
<link rel="stylesheet" href="{php echo $_W['siteroot'] . 'addons/wn_storex/template/style/css/membercard.css'}">
<div class="wn-main">
	<div class="wn-main__head">规格管理</div>
	<div class="wn-main__content">
		<div class="wn-tabs">
			<div class="wn-tabs__item {if $op == 'display'}wn-tabs__item--active{/if}">
				<a class="wn-tabs__link" href="{php echo $this->createWebUrl('shop_poster', array('op' => 'display', 'storeid' => $_GPC['storeid']))}">海报列表</a>
			</div>
			<div class="wn-tabs__item {if $op == 'post'}wn-tabs__item--active{/if}">
				<a class="wn-tabs__link" href="javascript:;">编辑</a>
			</div>
		</div>
		<div class="app" id="app">
			<div class="app-side" style="float: left;">
				<div class="editor" style="width: 500px; margin-left: 30px;">
					<div class="app-header-setting">
						<div class="arrow-left"></div>
						<div class="app-header-setting-inner">
							<div class="panel panel-default">
								<div class="wn-card-menu">
									<ul class="nav nav-tabs">
										<li class="active" style="">
											<a href="#setting" aria-controls="setting" role="tab" data-toggle="tab">基本设置</a></li>
										<li class="" style="">
											<a href="#design" aria-controls="design" role="tab" data-toggle="tab"> 设 &nbsp; 计 </a>
										</li>
										<li class="" style="">
											<a href="#focus" aria-controls="focus" role="tab" data-toggle="tab" v-show="post.type == 3"> 关注 </a>
										</li>
									</ul>
								</div>
								<div class="tab-content">
									<div class="panel-body form-horizontal tab-pane fade in active" id="setting">
										<div class="wn-edit-head">
											基本设置
										</div>
										<div class="form-group">
											<label class="col-sm-3 control-label">名称<span
													style="color:red">*</span></label>
											<div class="col-sm-8 col-xs-12">
												<input type="text" class="form-control" style="" v-model="post.name">
											</div>
										</div>
										<div class="form-group">
											<label class="col-sm-3 control-label">类型</label>
											<div class="col-sm-8 col-xs-12">
												<label class="radio-inline">
													<input type="radio" value="1" name="type" v-model="post.type"/> 商城海报
												</label>
												<label class="radio-inline">
													<input type="radio" value="2" name="type" v-model="post.type"/> 商品海报
												</label>
												<label class="radio-inline">
													<input type="radio" value="3" name="type" v-model="post.type"/> 关注海报
												</label>
											</div>
										</div>
										<div class="form-group">
											<label class="col-sm-3  control-label">回复关键词<span
													style="color:red">*</span></label>
											<div class="col-sm-8 col-xs-12">
												<input type="text" class="form-control" style="" v-model="post.keyword">
												<span class="help-block">
											如果是商品海报 ，回复关键词是 关键词+商品ID
											</span>
											</div>
										</div>
										<div class="form-group">
											<label class="col-sm-3 control-label">等待文字<span
													style="color:red">*</span></label>
											<div class="col-sm-8 col-xs-12">
												<textarea type="text" class="form-control" style="" v-model="post.wait"></textarea>
												<span class="help-block">
											例如：您的专属海报正在拼命生成中，请等待片刻...
											</span>
											</div>
										</div>
									</div>
									<div class="panel-body form-horizontal tab-pane fade" id="design">
										<div class="wn-edit-head">
											设计
										</div>
										<div class="help">

											<div class="alert alert-success">
												<p>操作说明：</p>
												<p>选择添加元素</p>
												<p>可以选择拖动元素位置</p>
												<p>拖动出外框时删除该元素,</p>
												<p>编辑元素时，该元素自动置顶</p>
											</div>
										</div>
										<div class="form-group">
											<label class="col-sm-3 control-label">背景图片<span style="color:red">*</span></label>
											<div class="input-group col-sm-8">
												<input type="text" v-model="post.background" disabled class="form-control" placeholder="图片地址">
												<span class="input-group-btn" @click="uploadImage(post, 'background')">
												<button class="btn btn-default" type="button"><i
														class="fa fa-plus-circle green"></i>&nbsp;选择图片</button>
												</span>
											</div>
										</div>
										<div class="form-group">
											<label class="col-sm-3 control-label">元素<span
													style="color:red">*</span></label>
											<div class="btn btn-default" @click="addList(item.value)"
											     v-for="item in typeList">
												{{item.name}}
											</div>
										</div>
										<div class="form-group" v-if="editPostType == 'img'">
											<label class="col-sm-3 control-label">上传图片<span
													style="color:red">*</span></label>
											<div class="input-group">
												<input type="text" v-model="post.list[editPostIndex]['url']" disabled
												       class="form-control" placeholder="图片地址">
												<span class="input-group-btn"
												      @click="uploadImage(post.list[editPostIndex], 'url')">
												<button class="btn btn-default" type="button"><i
														class="fa fa-plus-circle green"></i>&nbsp;选择图片</button>
												</span>
											</div>
										</div>
										<template v-if="editPostType == 'nickname'">
											<div class="form-group">
												<label class=" col-sm-3  control-label">字体颜色</label>
												<div class="input-group col-sm-8">
													<input type="text" name="" value=""
													       v-model="post.list[editPostIndex]['color']"
													       class="form-control" style="">
													<span class="input-group-addon"
													      style="width: 35px; border-left: none;"
													      :style="{'background-color' : post.list[editPostIndex]['color']}"></span>
													<span class="input-group-btn">
														<button class="btn btn-default colorpicker" v-colorpicker="{'object': post.list[editPostIndex], 'key': 'color'}" type="button">选择颜色 <i class="fa fa-caret-down"></i></button>
														<button class="btn btn-default colorclean" @click="post.list[editPostIndex]['color'] = ''" type="button"><span><i class="fa fa-remove"></i></span></button>
													</span>
												</div>
											</div>
											<div class="form-group">
												<label class="col-sm-3 control-label">字体大小<span style="color:red">*</span></label>
												<div class="input-group col-sm-4">
													<input type="number" v-model="post.list[editPostIndex]['fontSize']" class="form-control" placeholder="字体大小">
													<span class="input-group-addon">px</span>
												</div>
											</div>
										</template>
									</div>
									<div class="panel-body form-horizontal tab-pane fade" id="focus">
										<div class="wn-edit-head">
											关注
										</div>
										<div class="form-group">
											<label class="col-sm-3 control-label">积分奖励<span
													style="color:red">*</span></label>
											<div class="col-sm-8 col-xs-12">
												<input type="text" class="form-control" style="" v-model="post.credit1">
											</div>
										</div>
										<div class="form-group">
											<label class="col-sm-3 control-label">余额奖励<span
													style="color:red">*</span></label>
											<div class="col-sm-8 col-xs-12">
												<input type="text" class="form-control" style="" v-model="post.credit2">
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>

					<div class="clearfix"></div>
					<div class="clearfix">
						<button class="btn btn-primary btn-lg" @click="submitPoster()">提交修改</button>
					</div>
				</div>
			</div>
			<div class="app-preview" style="width: 375px;">
				<div class="app-header"></div>
				<div class="app-content" style="z-index: 999; position: relative; width: 375px;">
					<div class="title" style="z-index: 999; position: relative"><h1 style="background-size: 100%;"><span>超级海报</span></h1></div>
					<div>
						<div class="poster-box" :style="{ backgroundImage: 'url(' + post.background + ')' }">

							<drag @edit="drag(index)" @remove="remove(index)" class="poster-box__drag" :item="item"
							      v-for="(item,index) in post.list" :key="item.key"></drag>
						</div>
					</div>
				</div>

			</div>
		</div>
	</div>
</div>
<script>
	require(['vue'], function (Vue) {
		var drag = {
			name: 'drag',
			template: '<div ref="drag" @mousedown.self="dragDown"  class="js-drag" ' +
			'     :style="{' +
			'width: item.width + \'px\',\n' +
			'height: item.height + \'px\',\n' +
			'top: item.top + \'px\',\n' +
			'left: item.left + \'px\',\n' +
			'zIndex: item.zIndex,\n' +
			'color: item.color,\n' +
			'fontSize: item.fontSize + \'px\',\n' +
			'backgroundImage: \'url(\' + item.url + \')\'' +
			'}">' +
			'<div class=\'js-zoom poster-box__zoom\' @mousedown="zoomDown" ></div>' +
			'<span v-if="item.type == \'nickname\'">昵称</span>' +
			'</div>',
			props: ['item'],
			data() {
				return ({
					move_target: {},
					posix: {},
					move: false,
					zoom: false
				})
			},
			methods: {
				'dragDown': function (e) {
					this.move_target = $(e.target);
					this.move = true;
					var position = $(e.target).position();
					this.posix = {
						'x': e.pageX - position.left,
						'y': e.pageY - position.top,
						'w': $(e.target).width(),
						'h': $(e.target).height()
					};

					this.$emit('edit');
				},
				dragMove(e) {
					if (!!this.move) {
						var left = e.pageX - this.posix.x,
							top = e.pageY - this.posix.y
						this.move_target.css({
							'top': top,
							'left': left
						})
						this.item.top = top;
						this.item.left = left;
						if (-left > this.posix.w || left > 375 || -top > this.posix.h) {
							this.$emit('remove')
						}
					}
				},
				zoomDown: function (e) {
					this.move_target = $(e.target).parent()
					this.posix = {
						'x': e.pageX,
						'y': e.pageY,
						'w': $(e.target).parent().width(),
						'h': $(e.target).parent().height()
					};
					this.move = true
					this.zoom = true
					this.$emit('edit');
				},
				zoomMove(e) {
					if (!!this.move) {
						var width = Math.max(30, e.pageX - this.posix.x + this.posix.w),
							height = Math.max(30, e.pageY - this.posix.y + this.posix.h)
						this.move_target.css({
							'width': width,
							'height': height
						});
						this.item.width = width
						this.item.height = height
					}
				}
			},
			created() {
				const self = this;
				$(document).mousemove(function (e) {
					if (!!self.move) {
						var posix = !self.move_target ? {'x': 0, 'y': 0} : self.move_target.posix,
							callback = self.zoom ? self.zoomMove : self.dragMove

						callback.call(this, e, posix);
					}
				}).mouseup(function (e) {
					if (!!self.move || !!self.zoom) {
						var callback = self.call_up || function () {
						};
						callback.call(this, e);
						self.zoom = false
						self.move = false
						self.$emit('up')
					}
				});
			}
		}
		poster_info = {php echo json_encode($poster_info)};
		var $el = new Vue({
			el: '#app',
			data: {
				typeList: [
					{
						type: 'avatar',
						name: '头像',
						value: {
							type: 'avatar',
							width: 100,
							height: 100,
							top: 0,
							left: 0,
							zIndex: 0,
							color: '#ddd',
							fontSize: 14,
							url: "{php echo MODULE_URL . '/template/style/img/logo.jpg'}"
						}
					},
					{
						type: 'nickname',
						name: '昵称',
						value: {
							type: 'nickname',
							width: 100,
							height: 40,
							top: 20,
							left: 115,
							zIndex: 0,
							color: '#ddd',
							fontSize: 14,
							url: ''
						}
					},
					{
						type: 'qr',
						name: '二维码',
						value: {
							type: 'qr',
							width: 100,
							height: 100,
							top: 0,
							left: 0,
							zIndex: 0,
							color: '#ddd',
							fontSize: 14,
							url: "{php echo MODULE_URL . '/template/style/img/qr.png'}"
						}
					},
					{
						type: 'img',
						name: '图片',
						value: {
							type: 'img',
							width: 100,
							height: 100,
							top: 0,
							left: 0,
							zIndex: 0,
							color: '#ddd',
							fontSize: 14,
							url: 'http://caochunjiang.oss-cn-shanghai.aliyuncs.com/images/281/2017/09/hIG2gdvkiX2b2bG23I3v6UUoIOlI1k.jpg'
						}
					}
				],
				post: poster_info,
				editPostType: null,
				editPostIndex: null
			},
			components: {
				'drag': drag
			},
			directives: {
				'colorpicker': {
					bind: function (el, binding) {
						var value = binding.value; // 传递给指令的值
						require(['jquery', 'util'], function ($, util) {
							util.colorpicker($(el), function (color) {
								$el.$set(value.object, value.key, color.toHexString())
							});
						});
					}
				}
			},
			methods: {
				addList(value) {
					value = JSON.parse(JSON.stringify(value))
					value.zIndex = this.post.list.length + 1
					value.key = Math.random()
					this.post.list.push(value)
				},
				uploadImage: function (target, key) {
					const self = this;
					require(['fileUploader'], function (uploader) {
						uploader.show(function (img) {
							self.$set(target, key, img.url)
						}, {
							'direct': true,
							'multiple': false
						});
					});
				},
				drag(index) {
					var zIndex = this.post.list[index]['zIndex'];
					for (var i in this.post.list) {
						if (this.post.list[i]['zIndex'] > zIndex) {
							this.post.list[i]['zIndex'] = this.post.list[i]['zIndex'] - 1
						}
					}
					this.post.list[index]['zIndex'] = this.post.list.length
					this.editPostType = this.post.list[index]['type']
					this.editPostIndex = index
				},
				remove(index) {
					this.post.list.splice(index, 1)
				},
				submitPoster() {
					$.post("{php echo $this->createWebUrl('shop_poster', array('op' => 'post', 'storeid' => $_GPC['storeid']))}", {params : this.post}, function(data) {
						data = $.parseJSON(data);
						if (data.message.errno == 0) {
							util.message('编辑成功', data.redirect, 'success');
						} else {
							if (data.message.message) {
								util.message(data.message.message, data.redirect, 'error');
							}
							util.message('编辑失败', data.redirect, 'error');
						}
						console.dir(data);
					})
				}
			}
		})
	})
</script>

{template 'common/footer-storex'}